import React, { Component } from 'react';

import "../main.css";
import Head from './header.js';
import Body from './artcontent';
import "../App.css";
import base from '../base.js';
import DivShow from '../front/divshow';
import axios from 'axios';
import PageComponent from '../front/pageInfo.js';

const basePath = base().basePath;

class AppCon extends Component {

   constructor(props){
       super(props);
       this.state = {
           url:basePath+'/topic/new',
           pageInfo:{},
           loginVisible: true,
           username:'',
           password:'',
       }
   }


  loadUrl(newUrl){
      this.setState(()=>({
          url: newUrl
      }));
  }


    usernameChangeHandle(e){
        this.setState({
            username:e.target.value
        });

    }

    passwordChangeHandle(e){
        this.setState({
            password:e.target.value
        });
    }

    login(){
        var json = {};
        json.username = this.state.username;
        json.password = this.state.password;

        axios.post(basePath+"/admin/login", json).then((res) => {
            if(res.data.result === 'SUCCESS'){
                console.log("success");
                this.setState({
                    loginVisible: false,
                });
            }else{
                console.log("failed")
            }
        });
    }

    close(){
        
    }

  render() {

      let content;
      if(!this.state.loginVisible){
          content = (
              <div>
                  <Head fnCallback={this.loadUrl.bind(this)}/>
                  <div className="body">
                      <div className="content">
                          <div className="col1">
                              <Body url={this.state.url}/>
                          </div>
                      </div>
                  </div>
                  <div className="footer">
                      <span>footer</span>
                  </div>
              </div>
          );
      }


    return (
        <div>
            <DivShow visible={this.state.loginVisible} close={this.close.bind(this)}>
                <div className="mid" style={{height:'30px', width:'200px'}}>
                    <input size="30" onChange={this.usernameChangeHandle.bind(this)} className="input" type="text" placeholder="用户名" value={this.state.username}/>
                </div>
                <div className="mid" style={{height:'30px', width:'200px'}}>
                    <input size="30" onChange={this.passwordChangeHandle.bind(this)}  className="input" type="password" placeholder="密码" value={this.state.password}/>
                </div>
                <div className="mid" style={{height:'30px', width:'200px'}}>
                    <button onClick={this.login.bind(this)}>登陆</button>
                </div>
                <div style={{height:'20px'}}>

                </div>
            </DivShow>
            {content}
        </div>
    );
  }
}

export default AppCon;
